<template>
    <div v-loading="addLoading">
      <div class="title">
        <p>{{$t('message.config.addRepository')}}</p>
      </div>

      <div class="main">
        <div class="form-div">
          <el-card class="card">
            <el-form ref="form" :rules="rules" :model="form" label-width="80px">
              <el-form-item :label="$t('message.global.group')">
                <el-input v-model="form.group" disabled class="ipt-config"></el-input>
              </el-form-item>
              <el-form-item :label="$t('message.global.unit')">
                <el-input v-model="form.unit" disabled class="ipt-config"></el-input>
              </el-form-item>

              <el-form-item :label="$t('message.global.version')" prop="version">
                <el-input v-model="form.version" class="ipt-config"></el-input>
              </el-form-item>

              <el-form-item :label="$t('message.global.profile')" prop="profile">
                <el-input v-model="form.profile" class="ipt-config"></el-input>
              </el-form-item>

              <el-form-item :label="$t('message.global.description')" prop="description">
                <el-input v-model="form.description" class="ipt-config"></el-input>
              </el-form-item>

              <el-form-item>
                <el-button type="primary" @click="onSubmit">{{$t('message.global.create')}}</el-button>
                <el-button @click="back">{{$t('message.global.cancel')}}</el-button>
              </el-form-item>
            </el-form>
          </el-card>
        </div>
      </div>

    </div>
</template>

<script>


    export default {
      name: "add-repository",
      data : function(){
        return {
          addLoading : false,//submit loading
          form : {
            unitId : null,
            group : '',
            unit : '',
            version : '',
            profile : '',
            description : '',
          },
          rules : {
            version : [
              {required : true , message : this.$t('message.config.addForm.tips.versionNotNull'),trigger : "blur"}
            ],
            profile : [
              {required : true , message : this.$t('message.config.addForm.tips.profileNotNull'),trigger : "blur"}
            ],
            description : [
              {required : true , message : this.$t('message.config.addForm.tips.descriptionNotNull'),trigger : "blur"}
            ],
          }

        }
      },
      methods : {
        onSubmit(){
          this.$refs['form'].validate(valid => {
            if(valid){
              this.$post('/config/addVersion',this.form).then((code) => {
                this.addLoading = false;
                if(code == 0){
                  //success
                  this.$message.success(this.$t("message.config.saveSuccess"));
                  window.history.back();
                }else if(code == 1){
                  //exists
                  this.$message.warning(this.$t("message.config.versionExist"))
                }else{
                  alert('not define code:' + code);
                }
              }, () =>{
                this.addLoading = false;
              });
            }
          });
        },
        back(){
          window.history.back();
        }
      },
      mounted(){
        this.form.group = this.$route.query.group;
        this.form.unit = this.$route.query.unit;
        this.form.unitId = this.$route.query.unitId;
      }
    }
</script>

<style scoped>
  .title{margin-bottom:3rem;}
  .title p{text-align: center;font-size: 22px;}
  .main{width:700px;margin: 0 auto;}
  .card{padding:30px 100px 0px 100px;}
</style>
